<template>
  <div id="app">
    <h1>书籍管理系统</h1>
    <div>
      <table>
        <thead>
          <tr>
            <th>id</th>
            <th>书名</th>
            <th>作者</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in list" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.bookName }}</td>
            <td>{{ item.author }}</td>
            <td>
              <button class="updBtn">编辑</button>
              <button class="delBtn" @click="delBtn(item.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios';
import { ref } from 'vue';
const list = ref([]);
axios.get('http://localhost:5000/book').then(res => {
  // 获取数据
  console.log(res.data.data);
  list.value = res.data.data;
});
 const delBtn=function (id) {
  axios.delete(`http://localhost:5000/book/${id}`).then(
ctx=>{
if (confirm("是否删除？？？")) {
  let item=list.value.findIndex(item=>item.id===id)
  list.value.splice(item,1)
} 
 })
}

</script>

<style>
.updBtn{
  background-color: blue;
  color: white;
  border-radius: 10px;
  
}
table{ 
border: 1px black solid; 
}
.delBtn{background-color: blue;
  color: white;
  border-radius: 10px;margin-left: 4px;
}
#app {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  border-radius: 10px;
  background-color: brown;
}
</style>